import React, { useMemo, useState, useCallback } from 'react';

// useMemo和useCallback和momo区别
// memo针对 一个组件的渲染是否重复执行
// useMemo 针对一段函数逻辑是否重复执行
// useCallback 参数如果是空数组的话就只会执行一次
export default function App () {
    const [target, setTarget] = useState(0);
    const [other, setOther] = useState(0);

    const sum = useMemo(() => {
        console.log('重新计算一次');
        let _sum = 0;
        for (let i = 1; i <= target; i++) {
            _sum += i;
        }
        return _sum;
    }, [target]);

    const inputChange = useCallback((e) => {
        console.log(e.target.value);
    }, []);

    return (
        <div>
            <input type="text" onChange={inputChange} />
            <div>{target} {sum}</div>
            <button onClick={() => setTarget(target + 1)}>递增</button>
            <button onClick={() => setTarget(target - 1)}>递减</button>

            <div>干扰项 {other}</div>
            <button onClick={() => setOther(other + 1)}>递增</button>
            <button onClick={() => setOther(other - 1)}>递减</button>
        </div>
    );
}
